<template>
  <dt-modal-edit
    ref="info"
    :title="title"
    :label-width="100"
    okText="确定"
    :width="800"
    @ok="onOk"
    @cancelData="cancelData">
    <div class="every" v-if="showFlag">
      <div class="title">
        <span>达成条件</span>
        全部完成
      </div>
      <div class="caseCon" v-for="(item, index) in listData" :key="index">
        <div v-if="item.completeCount == 0">
          <div class="caseOne">
            <p>
              <input type="checkbox" v-model="item.checkFlag" />
              {{ item.name }}
            </p>
            <p class="p1" v-if="item.childFlag != 1 && item.checkFlag">
              <span>目标值</span>
              <span>
                <Input v-model="item.targetValue" />
              </span>
              <span>{{ item.targetUnit }}</span>
            </p>
          </div>
          <ul v-if="item.childFlag == 1">
            <li v-for="(child, index) in item.children" :key="index">
              <p>{{ child.name }}</p>
              <p class="p1">
                <span>目标值</span>
                <span><Input v-model="child.targetValue" /></span>
                <span>{{ child.targetUnit }}</span>
              </p>
            </li>
          </ul>
        </div>
      </div>
      <div class="title" v-if="completeCount1.length">
        <span>达成条件</span>
        完成1项即可
      </div>
      <div class="caseCon" v-for="(item, index) in completeCount1" :key="'1' + index">
        <div>
          <div class="caseOne">
            <p>
              <input type="checkbox" v-model="item.checkFlag" />
              {{ item.name }}
            </p>
            <p class="p1" v-if="item.childFlag != 1 && item.checkFlag">
              <span>目标值</span>
              <span><Input v-model="item.targetValue" /></span>
              <span>{{ item.targetUnit }}</span>
            </p>
            <p v-if="item.checkFlag == 0" class="noCheck">不考核</p>
          </div>
          <ul v-if="item.childFlag == 1 && item.checkFlag">
            <li v-for="(child, index) in item.children" :key="index">
              <p>{{ child.name }}</p>
              <p class="p1">
                <span>目标值</span>
                <span><Input v-model="child.targetValue" /></span>
                <span>{{ child.targetUnit }}</span>
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </dt-modal-edit>
</template>

<script>
  import caseRateMgr from '@/biz/caseRate/caseRate'
  export default {
    data() {
      return {
        listData: {},

        title: '',
        completeCount1: [],
        showFlag: false
      }
    },

    methods: {
      configUpdate() {
        this.listData.forEach((item) => {
          if (item.checkFlag == 0) {
            item.targetValue = 0
          }
        })
        let params = {
          req: this.listData
        }
        return caseRateMgr
          .configUpdate(params)
          .then((res) => {
            this.$Message.success('设置成功')
            this.$refs.info.hide()
            this.$emit('updateDate')
          })
          .catch((err) => {})
      },
      cancelData() {
        this.listData = {}
        this.title = ''
        this.completeCount1 = []
        this.showFlag = false
      },
      show(title, data) {
        this.showFlag = true
        this.listData = this.$tool.deepClone(data)

        this.listData.forEach((item) => {
          item.checkFlag = Boolean(item.checkFlag)
        })
        this.title = title
        this.completeCount1 = this.listData.filter((item) => {
          return item.completeCount == 1
        })
        this.$refs.info.show()
      },
      onOk() {
        let chooseOneFlag = this.listData.some((item) => {
          return item.checkFlag
        })
        if (!chooseOneFlag) {
          this.$Message.warning('至少选择一项考核内容')
          return false
        }

        let emptyFlag = this.listData.some((item) => {
          return item.checkFlag && item.targetValue == ''
        })

        if (emptyFlag) {
          this.$Message.warning('请填写选中项的考核值')
          return false
        }
        this.listData.forEach((item) => {
          item.checkFlag = Number(item.checkFlag)
        })
        this.configUpdate()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .title {
    color: #999;
    font-size: 16px;
    margin-top: 15px;
  }
  .caseCon {
    ul {
      li {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        line-height: 2;
        font-size: 15px;
        font-weight: normal;
        padding-left: 15px;
      }
    }
    .caseOne {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      line-height: 2;
      font-size: 15px;
      font-weight: normal;
      margin-top: 10px;
    }
    .p1 {
      width: 30%;
      display: flex;
      flex-direction: row;
      text-align: center;
      span:nth-child(1) {
        display: block;
        width: 80px;
      }
      span:nth-child(2) {
        display: block;
        width: 80px;
      }
      span:nth-child(3) {
        display: block;
        width: 20px;
      }
    }
    .noCheck {
      color: #ed4014;
    }
  }
</style>
